<!DOCTYPE html>
<html>

<head>
    <title>找回密码</title>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${ctxPath}/assets/common/layui/css/layui.css"/>
    <link rel="stylesheet" href="${ctxPath}/assets/common/css/login.css" media="all">
    <style>
        body {
            background-image: url("${ctxPath}/assets/common/images/bg_login2.svg");
            background-position: center 110px;
            background-repeat: no-repeat;
            background-size: 100%;
            background-color: #f0f2f5;
        }

        .login-header {
            color: rgba(0, 0, 0, .85) !important;
        }

        .login-footer {
            color: rgba(0, 0, 0, 0.7) !important;
        }

        .login-footer a {
            color: rgba(0, 0, 0, 0.7) !important;
        }

        .login-footer a:hover {
            color: rgba(0, 0, 0, 0.4) !important;
        }

        .login-body > .layui-card {
            max-width: 450px;
        }

        .login-body .layui-form-pane .layui-form-label {
            width: 120px;
        }

        .login-body .layui-form-pane .layui-input-block {
            margin-left: 120px;
        }

    </style>
    <script>
        if (window != top)
            top.location.replace(location.href);
    </script>
</head>

<body>
<div class="login-wrapper">

    <div class="login-header">
        <img src="${ctxPath}/assets/expand/images/logo.png"> ${systemName}
    </div>

    <div class=" login-body">
        <div class="layui-card">
            <div class="layui-card-header">
                <i class="layui-icon layui-icon-engine"></i>&nbsp;&nbsp;找回密码
            </div>
            <form class="layui-card-body layui-form layui-form-pane" action="" method="post">
                <!--<div class="layui-form-item">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-block">
                        <input name="account" id="account" type="text" lay-verify="required" class="layui-input"
                               placeholder="请输入用户名">
                    </div>
                </div>-->
                <div class="layui-form-item">
                    <label class="layui-form-label">手机号</label>
                    <div class="layui-input-block">
                        <input name="phone" id="phone" type="text" lay-verify="required|checkPhone" class="layui-input"
                               placeholder="请输入手机号">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">身份证</label>
                    <div class="layui-input-block">
                        <input name="idcard" id="idcard" type="text" lay-verify="required|checkIdcard"
                               class="layui-input" placeholder="请输入身份证号">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"><i class="layui-icon layui-icon-vercode"></i></label>
                    <div class="layui-input-block">
                        <div class="layui-row inline-block">
                            <div class="layui-col-xs7">
                                <input name="graphicCode" id="graphicCode" type="text" lay-verify="required"
                                       placeholder="请输入验证码" class="layui-input">
                            </div>
                            <div class="layui-col-xs5" style="padding-left: 10px;">
                                <img class="login-captcha" src="${ctxPath}/kaptcha">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">手机验证码</label>
                    <div class="layui-input-block">
                        <div class="layui-col-xs7">
                            <input name="phoneCode" id="phoneCode" type="text" lay-verify="required" class="layui-input"
                                   placeholder="请输入手机验证码">
                        </div>
                        <div class="layui-col-xs5" style="padding-left: 10px;">
                            <button class="layui-btn layui-btn-fluid layui-btn-disabled" disabled id="phoneCodeButton">
                                获取验证码
                            </button>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <button id="nextButton" class="layui-btn layui-btn-fluid">下一步</button>
                </div>
            </form>
        </div>
    </div>
</div>

@/* 加入contextPath属性和session超时的配置 */
<script type="text/javascript">
    var Feng = {
        ctxPath: "",
        addCtx: function (ctx) {
            if (this.ctxPath === "") {
                this.ctxPath = ctx;
            }
        }
    };
    Feng.addCtx("${ctxPath}");
</script>
<script type="text/javascript" src="${ctxPath}/assets/common/layui/layui.js"></script>
<script type="text/javascript" src="${ctxPath}/assets/common/js/common.js"></script>

<script>
    window.history.forward(-1);

    var i = 60;
    layui.use(['layer', 'form', 'ax'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var $ax = layui.ax;

        // 图形验证码
        $('.login-captcha').click(function () {
            this.src = this.src + '?t=' + (new Date).getTime();
        });

        //输入图形验证码后，获取手机验证码按钮启用
        $("#graphicCode").blur(function () {
            var graphicCode = $.trim($("#graphicCode").val());
            if (graphicCode != "") {
                $('#phoneCodeButton').removeClass("layui-btn-disabled");
                $("#phoneCodeButton").attr("disabled", false);
            } else {
                $('#phoneCodeButton').addClass("layui-btn-disabled");
                $("#phoneCodeButton").attr("disabled", true);
            }
        });

        //获取手机验证码
        $("#phoneCodeButton").click(function () {
            //var account = $("#account").val();
            var phone = $("#phone").val();
            var idcard = $("#idcard").val();
           /* if (account == "") {
                Feng.error("用户名不能为空")
                $("#account").focus();
                return false;
            }*/
            if (phone == "") {
                Feng.error("手机号不能为空")
                $("#phone").focus();
                return false;
            } else {
                var reg = /^1[3456789]\d{9}$/;
                if (!reg.test(phone)) {
                    Feng.error("手机号格式错误")
                    $("#phone").focus();
                    return false;
                }
            }
            if (idcard == "") {
                Feng.error("身份证号不能为空")
                $("#idcard").focus();
                return false;
            } else {
                var reg = /^[1-9]\d{5}(18|19|([23]\\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$|^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}[0-9Xx]$/;
                if (!reg.test(idcard)) {
                    Feng.error("身份证号格式错误")
                    $("#idcard").focus();
                    return false;
                }
            }

            //检查当前手机号和预留手机号是否一致
            var checkAjax = new $ax(Feng.ctxPath + "/mgr/checkUserNamePhone", function (data) {
                if (data.result == "error") {
                    Feng.error("该手机号码与预留手机号码不一致");
                    return false;
                } else {
                    phoneCode(phone);
                }
            })
            //checkAjax.set("account", account);
            checkAjax.set("phone", phone);
            checkAjax.set("idcard", idcard);
            checkAjax.start();
            return false;

        });

        //获取手机号验证码
        function phoneCode(account, phone) {
            var codeAjax = new $ax(Feng.ctxPath + "/mgr/phoneCode", function (data) {
                if (data.result == "success") {
                    countDown();
                }
            })
            codeAjax.set("account", account);
            codeAjax.set("phone", phone);
            codeAjax.start();
        }

        //验证码倒计时
        function countDown() {
            var fontSize = document.getElementById("phoneCodeButton");
            i = i - 1;
            $("#phoneCodeButton").html(i);
            fontSize.style.fontSize = 20 + "px";
            $('#phoneCodeButton').addClass("layui-btn-disabled");
            $("#phoneCodeButton").attr("disabled", true);
            if (i == 0) {
                $("#phoneCodeButton").html("重新发送");
                fontSize.style.fontSize = 15 + "px";
                $('#phoneCodeButton').removeClass("layui-btn-disabled");
                $("#phoneCodeButton").attr("disabled", false);
                i = 60;
                return;
            };
            setTimeout(function() {
                countDown()
            }, 1000);
        }

        //点击下一步
        $("#nextButton").click(function(){
            //var account = $("#account").val();
            var phone = $("#phone").val();
            var idcard = $("#idcard").val();
            var graphicCode = $("#graphicCode").val();
            var phoneCode = $("#phoneCode").val();

            /*if (account == "") {
                Feng.error("用户名不能为空")
                $("#account").focus();
                return false;
            }*/
            if (phone == "") {
                Feng.error("手机号不能为空")
                $("#phone").focus();
                return false;
            } else {
                var reg = /^1[3456789]\d{9}$/;
                if (!reg.test(phone)) {
                    Feng.error("手机号格式错误")
                    $("#phone").focus();
                    return false;
                }
            }
            if (idcard == "") {
                Feng.error("身份证号不能为空")
                $("#idcard").focus();
                return false;
            } else {
                var reg = /^[1-9]\d{5}(18|19|([23]\\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$|^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}[0-9Xx]$/;
                if (!reg.test(idcard)) {
                    Feng.error("身份证号格式错误")
                    $("#idcard").focus();
                    return false;
                }
            }
            if (graphicCode == "") {
                Feng.error("图形验证码不能为空")
                $("#graphicCode").focus();
                return false;
            }
            if (phoneCode == "") {
                Feng.error("手机验证码不能为空")
                $("#phoneCode").focus();
                return false;
            }

            //下一步
            var nextStepAjax = new $ax(Feng.ctxPath + "/mgr/nextStep", function (data) {
                if (data.result == "errorPhone") {
                    Feng.error("该手机号码与预留手机号码不一致")
                    return false;
                }else if(data.result == "errorGraphicCode"){
                    Feng.error("图形验证码错误")
                    return false;
                }
                // else if(data.result == "errorPhoneCode"){
                //     Feng.error("短信验证码错误")
                //     return false;
                // }
                else{//跳转下一步页面操作
                    window.location.href = "${ctxPath}/mgr/toNextStep?&phone="+phone+"&idcard="+idcard;
                }
            })
            //nextStepAjax.set("account", account);
            nextStepAjax.set("phone", phone);
            nextStepAjax.set("idcard", idcard);
            nextStepAjax.set("graphicCode", graphicCode);
            nextStepAjax.set("phoneCode", phoneCode);
            nextStepAjax.start();
            return false;//防止刷新

        });


    });
</script>


</body>
</html>